 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">线下充值记录</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <div class="search-item">
            <Date-picker style="width: 22%" type="datetime" placeholder="开始时间"></Date-picker>
            <Date-picker style="width: 22%" type="datetime" placeholder="结束时间"></Date-picker>
            <i-input style="width: 22%" :value.sync="value" placeholder="商户ID"></i-input>
            <i-select :model.sync="model" style="width: 22%; color: #000;" placeholder="交易状态">
                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
            </i-select>
            <i-button style="background-color: rgb(0, 150, 136); color: white;">搜索</i-button>
          </div>
        </div>
        <div class="capital-money">
          <div class="capital-money-item">
            订单数：<span class="list1">32</span>
            交易金额：<span class="list1">¥242442</span>
            入账金额：<span class="list2">¥150853.39</span>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <div style="float: left;">
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator></Page> <!-- page组件 -->
            </div>
          </div>
        </div>
      </div>
   </Card>

 </template>
 <script>
 let testData = {
   histories: [
     {
       transactionId: "E01202009251129433440014",
       merchantId: "20000029",
       bankName: "中国银行",
       bankNumber: "321212334333331111",
       payee: "中国石油",
       transactionAmount: "1000",
       fee:"1",
       enterAmount:"999",
       status: "交易成功",
       time:"2020-09-25 11:29:43",
       // operate: "编辑",
     },
     {
       transactionId: "E01202009251129433440014",
       merchantId: "20000028",
       bankName: "中国银行",
       bankNumber: "321212334333331111",
       payee: "中国石油",
       transactionAmount: "1000",
       fee:"1",
       enterAmount:"999",
       status: "交易成功",
       time:"2020-09-25 11:29:43",
       // operate: "编辑",
     },
     {
       transactionId: "E01202009251129433440014",
       merchantId: "20000027",
       bankName: "中国银行",
       bankNumber: "321212334333331111",
       payee: "中国石油",
       transactionAmount: "1000",
       fee:"1",
       enterAmount:"999",
       status: "交易成功",
       time:"2020-09-25 11:29:43",
       // operate: "编辑",
     }
   ]
 };
 import axios from "../../libs/axios.js";
 export default {
   name: 'offline_record',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       ajaxHistoryData: [],
       exportdata: [],
       // 初始化信息总条数
       dataCount: 0,
       // 每页显示多少条
       pageSize: 10,
       pageCurrent: 1,//当前页
       foodColumns: [
         {
           type: 'selection',
           width: 60,
           align: 'center',
           fixed: 'left'
         },
         {
           title: "交易单号",
           key: "transactionId"
         },
         {
           title: "商户ID",
           key: "merchantId"
         },
         {
           title: "银行",
           key: "bankName"
         },
         {
           title: "银行账号",
           key: "bankNumber"
         },
         {
           title: "收款人",
           key: "payee"
         },
         {
           title: "交易金额(元)",
           key: "transactionAmount"
         },
         {
           title: "手续费(元)",
           key: "fee"
         },
         {
           title: "入账金额(元)",
           key: "enterAmount"
         },
         {
           title: "状态",
           key: "status"
         },
         {
           title: "时间",
           key: "time"
         },
         {
          title: '操作',
          key: 'action',
          width: 120,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
                        return h("div", [
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: 'white',
                                padding: '0 5px',
                                height: '24px',
                                fontSize: '12px',
                                marginRight:'4px',
                                backgroundColor: "#009688"
                              },
                              on: {
                                click: () => {
                                  this.$router.push({
                                    name: 'off-view'
                                  })
                                  // this.show(params.index)
                                  // e.stopPropagation(); //阻止冒泡
                                  // alert('查看');
                                }
                              }
                            },
                            "查看"
                          ),
                          h(
                            "Button", {
                              props: {
                                size: "small"
                              },
                              style: {
                                color: '#000',
                                padding: '0 5px',
                                height: '24px',
                                fontSize: '12px'
                              },
                              on: {
                                // click: (e) => {
                                //   e.stopPropagation(); //阻止冒泡
                                //   alert('删除');
                                // }
                                click: () => {
                                  this.$router.push({
                                    name: 'off-check'
                                  })
                                }
                              }
                            },
                            "审核"
                          )
                        ]);
                      }
         }
       ],
       foodData: [],
       cityList: [
         {
           value: 'beijing',
           label: '交易状态'
         },
         {
           value: 'shanghai',
           label: '生成'
         },
         {
           value: 'shenzhen',
           label: '处理中'
         },
         {
           value: 'hangzhou',
           label: '成功'
         },
         {
           value: 'nanjing',
           label: '失败'
         }
       ],
       model: ''
     };
   },
   methods: {
     // 获取历史记录信息
     handleListApproveHistory() {
       // 保存取到的所有数据
       this.ajaxHistoryData = testData.histories;
       this.exportdata = testData.histories;
       this.dataCount = testData.histories.length;
       // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
       if (testData.histories.length < this.pageSize) {
         this.foodData = this.ajaxHistoryData;
       } else {
         this.foodData = this.ajaxHistoryData.slice(0, this.pageSize);
       }
     },
     // 点击切换页面
     changepage(index) {
       //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
       let _start = (index - 1) * this.pageSize;
       //需要显示结束数据的index
       let _end = index * this.pageSize;
       //截取需要显示的数据
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //储存当前页
       this.pageCurrent = index;
     },
     //每页显示的数据条数
     nowPageSize(index) {
       let _start = (this.pageCurrent - 1) * index;
       let _end = this.pageCurrent * index;
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //实时获取当前需要显示的条数
       this.pageSize = index;
     }
   },
   created() {
     this.handleListApproveHistory();
   }
 };
 </script>
 <style lang="less" scoped>
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 85px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-select-item-selected, .ivu-select-item-selected:hover{
       color: #fff;
       background-color: #5FB878;
     }
     .ivu-table-cell{
       padding-left: 7px;
       padding-right: 7px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-break: break-all;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
     .content-con{
       margin: 15px;
       .bank-search{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
         .search-item{
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
         }
       }
       .capital-money{
         padding-top: 15px;
         margin-bottom: 15px;
         .capital-money-item{
           margin-bottom: 10px;
           padding: 15px;
           line-height: 22px;
           border-left: 5px solid #009688;
           border-radius: 0 2px 2px 0;
           background-color: #f2f2f2;
           .list1{
             color: blue;
             margin-right: 10px;
           }
           .list2{
             color: green;
             margin-right: 10px;
           }
         }
       }
       .bank-form{

       }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
